<template>
	<view class="body">
		<view class="main">
			<view class="resultWapper">
				<view class="resultText">
					<text>保守型</text>
				</view>
				<view class="resultDate">
					<text>有效期至：{{title.year}}年{{title.mon}}月{{title.day}}日</text>
				</view>
				<view class="ddd"></view>
			</view>
			<view class="result-item">
				<view class="resul-data">
					<text>风险承受能力</text>
				</view>
			</view>
			<view class="result-item">
				<view class="resul-data">
					<text>期望投资收益</text>
				</view>
			</view>
			<view class="itemText">
				<text>您的风险承受能力较低，适合投资低风险、中低风线产品；除此之外的中低风险、中高风险三大风水大师空间的风格阿蚕丝黑粉v合适</text>
			</view>
		</view>
		<view class="radioBox">
			<view class="radio">
				<checkbox-group class="check"  @change="checkboxChange">
					<checkbox :checked="isChecked"  style="transform:scale(0.6)" />
				</checkbox-group>
				<view>我已了解：萨达萨达是登陆纽交所的匡扶汉室螺蛳粉i我连卡佛就看你是否对客户服务看见你发了快结束</view>
			</view>
		</view>
		<view class="resBtn" @tap="bankcard">
			<text>继续购买</text>
		</view>
		<view class="resBtn no" @click="fortune">
			<text>暂不购买</text>
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex"
	const {
		mapState:mapStates
	} = createNamespacedHelpers(
		"UserInfor"
	);
	
	export default {
		data() {
			return {
				//单选框
				isChecked:false,
				//当天时间
				title: {
					year:'2021',
					mon:'03',
					day:'15'
				}, 
			}
		},
		onLoad() {
			this.GetTime()
			
		},
		computed:{
			...mapStates(['userData'])
		},
		methods: {
			//单个复选框是否选中
			checkboxChange(){
				this.isChecked=true
			},
			//点击继续购买跳转选择银行卡支付
			bankcard(){
			    if(this.isChecked){
					this.userData.acceptRisk=84
					uni.redirectTo({
						
						url:"../bankcard/bankcard"
					})
				}else {
					this.isChecked=false
							uni.showToast({
								title: '请阅读相关协议',
								duration: 2000,
								icon:"none"
							})
						}
				
			},
			//点击暂不购买，跳转财富页面
			fortune(){
				uni.switchTab({
					url:'../fortune/fortune'
				})
			},
			//获取当天日期，确定份额
			GetTime() {
				var date = new Date();
				var base = Date.parse(date); // 转换为时间戳
				var year = date.getFullYear(); //获取当前年份
				var mon = date.getMonth() + 4; //获取当前月份加3个月
				var day = date.getDate(); //获取当前日
				var oneDay = 24 * 3600 * 1000
				this.title.mon= `${mon >= 10 ? mon : '0' + mon}`
				this.title.day= `${day >= 10 ? day : '0' + day}`; //今日时间
			},
		}
	}
</script>

<style>
	.body {
		height: 100vh;
		background: rgba(102, 102, 102, 0.15);
	}

	.main {
		padding: 30rpx;
		background-color: #FFFFFF;
	}

	.resultWapper {
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
	}

	.resultText {
		margin-top: 110rpx;
		font-size: 66rpx;
		color: #333333;
		text-align: center;
	}

	.resultDate {
		font-size: 28rpx;
		text-align: center;
		color: #666666;
		margin-bottom: 59rpx;

	}

	.ddd {
		height: 1rpx;
	}

	.result-item {
		margin: 20rpx 0rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.itemText {
		padding: 50rpx 0;
		font-size: 24rpx;
		color: #666666;
		border-top: 2rpx solid rgba(0, 0, 0, 0.05);
	}

	.radioBox {
		margin-top: 50rpx;
		padding: 0rpx 30rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.radio {
		display: flex;
	}

	.resBtn {
		width: 670rpx;
		height: 88rpx;
		background: #3476F1;
		text-align: center;
		line-height: 88rpx;
		color: #FFFFFF;
		margin: 38rpx auto;
		border-radius: 4rpx;
	}
	.no{
		background-color: #FFFFFF;
		color: #333333;
	}
</style>
